<template>
  <div class="content">
    <div class="content">
      <div class="ones">
        <div class="content">
          <div class=" content">
            <div v-for="(item, index) in agoArr" class="icon">
              <!-- <div class="show" @mouseenter="show(item)" @mouseleave="close"> -->
                <div class="show" @click="show(item)">
                <div class="message" v-show="showMessage===item.orderStatus">
                  <el-card>
                    <div>负责人:{{ item.executor }}</div>
                    <div>创建时间：{{ item.sendingTime }}</div>
                    <div>预期完成时间：{{ item.expectFinishTime }}</div>
                    <div>完成状态:{{ item.finishStatus }}</div>
                    <div>是否逾期:{{ item.delayed }}</div>
                    <div>备注:{{ item.comment }}</div>
                    <div v-if="item.orderStatus!='结束'" style="display: flex;justify-content: space-between;">
                      <el-button type="primary" @click="showPicture(item.statusId)">查看该状态图片</el-button>
                      <el-button type="primary" @click.stop="close">关闭</el-button>
                    </div>
                  </el-card>
                </div>
              <div class="Flow">
                <div v-if="item.finishStatus=='已完成'&&item.delayed=='正常'">
                  <i class="iconfont icon-tishi"  style="color: green" v-if="item.finishStatus=='执行中'"></i>
                  <i class="iconfont icon-tongyong_wancheng_tianchong_16" style="color: green" v-else></i>
                </div>
              <div v-else-if="item.finishStatus=='已完成'&&item.delayed=='延期'">
                <i class="iconfont icon-tishi"  style="color: red" v-if="item.finishStatus=='执行中'"></i>
                  <i class="iconfont icon-tongyong_wancheng_tianchong_16" style="color: red" v-else></i>
                </div>
                <div v-else-if="item.finishStatus=='执行中'&&item.delayed=='延期'">
                  <i class="iconfont icon-tishi"  style="color: red" v-if="item.finishStatus=='执行中'"></i>
                  <i class="iconfont icon-tongyong_wancheng_tianchong_16" style="color: red" v-else></i>
                </div>
                <div v-else-if="item.finishStatus=='执行中'&&item.delayed=='正常'">
                  <i class="iconfont icon-tishi"  style="color: green" v-if="item.finishStatus=='执行中'"></i>
                  <i class="iconfont icon-tongyong_wancheng_tianchong_16" style="color: green" v-else></i>
                </div>
                <div v-else-if="item.finishStatus=='执行中'&&item.delayed=='正常'">
                  <i class="iconfont icon-tishi"  style="color: green" v-if="item.finishStatus=='执行中'"></i>
                  <i class="iconfont icon-tongyong_wancheng_tianchong_16" style="color: green" v-else></i>
                </div>
                <div v-else>
                  <i class="iconfont icon-qingchu_gaoliang_16" style="color: grey"></i>
                </div>
              <div>{{item.orderStatus}}</div>
            </div>
              </div>
            <i class="iconfont icon-angles-right" v-if="item.orderStatus!='结束'" ></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="图片"
    width="30%"
  >
  <div v-if="url.length==0">无</div>
  <div  v-for="(item,index) in url" :key="item" style="display: inline-block;margin-right: 10px;" >
    <el-image
      style="width: 100px; height: 100px"
      :src="item"
      :zoom-rate="1.2"
      :preview-src-list="srcList"
      :initial-index="index"
      fit="cover"
    />
  </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import { ref, defineProps, watch } from 'vue'
import { tbhistory } from '/@/api/tb/tb_get_history'
import { tbgetpic } from "/@/api/tb/tbOrder";
const props = defineProps({
  orderid: String
})
const agoArr=ref([])
const showMessage=ref()
const dialogVisible = ref(false)
const url =ref([])
const srcList = ref([])
watch(
  () => props.orderid, //这样才可以检测到对象里面的值
  async () => {
     agoArr.value=[]
    const res = await tbhistory({ orderId: props.orderid })
    agoArr.value=res.list
    console.log(agoArr.value);
  },
  { immediate: true }
)
const show=(item)=>{
  if(item.finishStatus!='未完成'){
    showMessage.value=item.orderStatus
  }
}
const close=()=>{
  showMessage.value=''
}
const showPicture=async(e)=>{
  dialogVisible.value=true
  const pic=await tbgetpic({statusId:e}) 
  url.value=pic.list
  srcList.value=pic.list
 
  
}

</script>

<style lang="less" scoped>
.content {
  display: flex;
  font-size: 20px;
  flex-wrap: wrap;
  .ones {
    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:20px ;
      i {
        font-size:30px ;
        margin-right: 20px;
        margin-left: 20px;
        margin-bottom: 20px;
      }
    }
  }
}
.Flow{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.show{
position: relative;

.message{
position: absolute;
left: 0;
top: -260px;
width: 400px;
height: 200px;

div{
  font-size: 20px;
  // color: red;
}
}
}
</style>
